<script lang="ts" setup>
import Person from '@/components/Person.vue'

import { reactive } from 'vue'
import { nanoid } from 'nanoid'
import type { Persons } from '@/types'

let x = 999
// 使用reactive的泛型形式限制 personList 的属性名称
let personList = reactive<Persons>([
  { id: nanoid(), name: '张珊珊', age: 18 },
  { id: nanoid(), name: '李思思', age: 18 },
  { id: nanoid(), name: '王舞', age: 18, address: '北京市昌平区宏福科技园' },
])
console.log(personList)
</script>

<template>
  <div class="app">
    <h1>我是 App 根组件！</h1>
    <!-- 除了ref属性，其他如果使用v-bind:绑定的就是可以执行表达式，否则其他的都是字符串 -->
    <h1 a="1+1" :b="1 + 1" c="x" :d="x" ref="qew">务必看懂下面这一行的代码</h1>
    <hr />
    <Person heihei="嘿嘿" haha="哈哈" :personLists="personList"></Person>
  </div>
</template>

<style scoped>
.app {
  background-color: #2fbd4e;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>
